<template>
  <!-- 催收执行页-行动区模块-外访行动区 -->
  <section class="page visit-action-area">
    <el-form ref="form" :rules="rules" :model="applyModel" :inline="true" label-width="80px">
      <el-form-item label="催收对象:" prop="relationship">
        <el-select v-model="applyModel.relationship" @change="onChange">
          <el-option v-for="{index,name,code} in $dict.getDictData('Relationship')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名:" prop="targetName">
        <el-input v-model="applyModel.targetName"></el-input>
      </el-form-item>
      <el-form-item label="地址类型:" prop="addressType">
        <el-select v-model="applyModel.addressType">
          <el-option v-for="{index,name,code} in $dict.getDictData('AddressType')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址:" prop="areaIds">
        <el-cascader v-model="applyModel.areaIds" :options="$city.getCityData()" change-on-select clearable></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址:" prop="addressDetail">
        <el-input v-model="applyModel.addressDetail"></el-input>
      </el-form-item>
      <el-form-item label="地址状态:" prop="addressStatus">
        <el-select v-model="applyModel.addressStatus">
          <el-option v-for="{index,name,code} in $dict.getDictData('AddressStatus')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行动代码:" prop="followupBack">
        <el-select v-model="applyModel.followupBack" @change="setCheckTime">
          <el-option v-for="{name,id} in customDataDict.filter(v=>v.dataType==='FOLLOW_UP').filter(m=>m.name!=='行动代码')" :key="id" :label="name" :value="id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="还款金额:" prop="repayAmount">
        <el-input type="number" v-model="applyModel.repayAmount"></el-input>
      </el-form-item>
      <el-form-item label="还款日期:" prop="repayDate">
        <el-date-picker :picker-options="pickerOptions" v-model="applyModel.repayDate" type="date" placeholder="请选择日期" :value-format="'yyyy-MM-dd'">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="行动说明:" prop="followContent">
        <el-input v-model="applyModel.followContent" type="textarea" :maxlength="500" :rows="5"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align:center;">
      <el-button @click="reset">重置</el-button>
      <el-button @click="submit" :loading="submitLoading">提交</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import DataBox from '~/components/common/data-box.vue';
import { Dependencies } from '~/core/decorator';
import { State, Getter, Mutation, Action, namespace } from 'vuex-class';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service.ts';
import { Prop, Emit, Watch } from "vue-property-decorator";
import { CASE_CHANNEL } from "~/config/enum.config"
import { OpenExecutionData } from "~/config/types";

const CollectionExecutionModule = namespace('collection-execution');

@Component({
  components: {
    DataBox,
  },
})
export default class VisitActionArea extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  @CollectionExecutionModule.Getter private collectonData: OpenExecutionData;
  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;

  @State private customDataDict;

  private personalInfo: any = {}
  private submitLoading: boolean = false;
  private pickerOptions:any={
    disabledDate: (time) => {
      let nowData = new Date()
      nowData = new Date(nowData.setDate(nowData.getDate()-1))
      return time < nowData
    }
  }

  private rules: any = {
    addressDetail: [{ required: true, message: '请输入详细地址' }],
    addressStatus: [{ required: true, message: '请选择地址状态' }],
    addressType: [{ required: true, message: '请选择地址类型' }],
    followContent: [{ required: true, message: '请输入行动说明' }],
    followupBack: [{ required: true, message: '请选择行动代码' }],
    relationship: [{ required: true, message: '请选择催收对象' }],
    targetName: [{ required: true, message: '请输入催收姓名' }],
    areaIds: [{ required: true, message: '请选择地址' }],
  };
  private applyModel: any = {
    addressDetail: '',
    addressStatus: '',
    addressType: '',
    caseId: '',
    followContent: '',
    followupBack: '',
    repayAmount: '',
    repayDate: '',
    relationship: '',
    targetName: '',
    areaIds: [],
    get areaId() {
      if (this.areaIds.length) {
        return this.areaIds[this.areaIds.length - 1]
      }
      return ""
    }
  };


  @Emit("success")
  private emitSuccess() {
    this.submitLoading = false;
    this.$message.success('操作成功');
    this.reset();
  }

  @Watch('caseId', {immediate: true})
  private onCaseId() {
    if (this.caseId) {
      this.caseOperatorPageService
      .personalInfo(this.caseId)
      .subscribe((data) => {
        this.personalInfo = data;
      });
    }
  }

  private reset() {
    const form: any = this.$refs['form'];
    form.resetFields();
  }
  private submit() {
    const form: any = this.$refs['form'];
    form.validate((result) => {
      if (!result) return;
      // 如果是协助催收，需要添加协助催收ID
      if (this.collectonData.caseChannel === "ASSIST") {
        const assistId = this.collectonData.otherData ? this.collectonData.otherData.assistId : ""
        this.applyModel.assistId = assistId
      }
      this.applyModel.caseId = this.caseId;
      this.submitLoading = true;
      this.caseOperatorPageService
        .addCaseFollowupRecord(CASE_CHANNEL.visit, this.applyModel)
        .subscribe(
          (data) => {
            this.emitSuccess();
          },
          (err) => {
            this.submitLoading = false;
          },
      );
    });
  }
  private setCheckTime() {
    if (!this.applyModel.followupBack) {
      this.applyModel.repayDate = '';
    }
    const currentTime: any = new Date();
    this.applyModel.repayDate = this.$filter.dateTimeFormat(
      new Date((currentTime / 1000 + 86400 * 7) * 1000),
    );
  }
  private onChange(val) {
    this.applyModel.targetName = val === 'SELF' ? this.personalInfo.personalName : ''
  }
}
</script>

<style lang="less" scoped>
.page.visit-action-area {
  height: 380px;
  overflow: auto;
}
</style>
